$primary-color: #3296fa;
$dark-color: #373d41;
$light-primary-color: #a5cffa;
$lightest-primary-color: #eaf6fe;
$important-color: #e63d2e;
$warning-color: #faa332;
$success-color: #60c213;
$default-color: #4c4c4c;
$desc-color: #999999;
$white-color: #ffffff;

$background-gray-color: #fafafa;
$background-default-color: #f7f8fa;
$background-default-active: #f0f2f5;

$border-gray-color: #f0f2f5;
$border-darkgray-color: #e5e5e5;


.el-header {
    box-sizing: content-box;
}
.el-badge__content.is-fixed {
    right: 0;
}
.el-badge__content {
    background-color: $important-color;
    border-radius: 8px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    height: 14px;
    border: none;
    min-width: 8px;
    line-height: 14px;
    padding: 0 4px;
    text-align: center;
    white-space: nowrap;
}

.el-aside,.el-menu {
    background-color: $background-default-color;
}

.el-container {
    background-color: $background-default-color;
}

.el-aside {
    border-right: 1px solid #e8e9eb;
}

.el-main {
    background-color: $white-color;
    padding: 0;
    padding: 20px;
}
.background-gray.el-main {
    background-color: $background-default-color;
}

.el-tabs__item {
    height: 50px;
    line-height: 50px;
    font-size: 14px;
}
.el-tabs__item.is-active,.el-tabs__active-bar {
    color: $primary-color;
}
.el-tabs__nav-wrap::after {
    height: 1px;
    color: $background-default-color;
}
.el-tabs__active-bar {
    bottom: 1px;
}

.el-tabs__header {
    margin: 0;
}

.el-form-item.is-success .el-input__inner, .el-form-item.is-success .el-input__inner:focus, .el-form-item.is-success .el-textarea__inner, .el-form-item.is-success .el-textarea__inner:focus {
    border: 1px solid #dcdfe6;
}

.el-button {
    border-radius: 2px;
    font-size: 14px;
    padding: 10px 30px;
    min-width: 120px;   
    text-align: center;
    &.el-dropdown__caret-button {
        min-width: auto;
    }
    &--text {
        padding: 0;
        min-width: auto;
    }
    &.el-button--luck {
        background-color: $important-color;
        color: #FFF;
        border-color: $important-color;
        transition: background-color .5;
    }
    &.el-button--default {
        background-color: #fff;
        color: $default-color;
        border-color: #ddd;
        transition: background-color .5;
        &:hover {
            color: $primary-color;
            background-color: #fff;
            border-color: $primary-color;
        }
    }
    &.el-button--boot {
        background-color: $primary-color;
        color: #fff;
        border-color: $primary-color;
        transition: background-color .5;
    }
    &.el-button--text {
        color: $primary-color;
    }
}

.el-input {
    @at-root #{&}--small{
        width: 300px;
        .el-input__inner {
            height: 36px;
            line-height: 36px;
        }
    }
    &.action {
        .el-input__suffix-inner {
            line-height: 36px;
            color: $light-primary-color;
        }
    }
}
.el-input__inner{
    height: 36px;
    padding: 3px 10px;
    border-radius: 0;
}

.el-input.samll-input {
    &__inner {
        height: 36px;
        padding: 3px 10px;
    }
}
.el-table {
    border: none;
    font-size: 14px;
    th {
        background-color: #f3f3f3;
        padding: 8px 0;
        text-align: left;
        div.cell {
            line-height: 1;
            padding: 0 20px;
            font-weight: normal;
            color: $desc-color;
        }
    }
    tr{
        td{
            padding: 20px 0;
            text-align: left;
            div.cell {
                line-height: 1;
                padding: 0 20px;
            }
        }
    }
}
.el-pagination{
    text-align: right;
    margin-top: 20px;
    &.is-background{
        .btn-next, .btn-prev, .el-pager li{
            background: $white-color;
            border-radius: 2px;
            border: 1px solid $border-gray-color;
            color: $desc-color;
            button#{&}{
                padding: 0 8px;
            }
        }
        button{
            &.btn-next,&.btn-prev{
                padding: 0 8px;
            }
        }
        .el-pager li{
            &:not(.disabled).active{
                background-color: $primary-color;
            }
        }
    }
}
.el-dialog {
    .el-dialog__header {
        text-align: left;
        border-bottom: 1px solid #ddd;
        .el-dialog__title{
            font-size: 16px;
        }
    }
    .el-dialog__footer {
        text-align: center;
    }
    &.confirm {
        .el-dialog__header {
            border: none;
        }
    }
}
.el-rate {
    display: flex;
    span {
        line-height: 22px;
        i {
            color: $primary-color !important;
            font-size: 22px;
        }
    }
    .el-rate__text{
        color: #FFF !important;
        background-color: $primary-color;
        border-radius: 5px;
        padding: 8px;
        line-height: 5px;
    }
}
.el-aside {
    background: $background-default-color;
    padding: 40px 0;
}
.el-input-group {
    &__append {
        .el-button.el-button--default:hover {
            color: initial;
            background-color: inherit;
            border-color: transparent;
        }
    }
}
.el-message-box {
    border-radius: 0px;
    .el-message-box__header{
        padding-top: 15px;
        padding-bottom: 10px;
        border-bottom:1px solid #eee;
    }
}
.el-header {
    height: auto !important;
    border: 0px;
    padding: 0 !important;
}

.el-date-editor .el-range-separator{
    line-height: 28px;
}

.el-menu{
    border-right: 0 !important;
    li{
        text-align: left;
        i,img {
            &+span {
                margin-left: 10px;
            }
        }
    }
    .el-menu-item-group {
        li {
            &.el-menu-item{
                padding-left: 65px !important;
            }
            text-align: left;
            &:hover {
                color: $primary-color;
            }
        }
    }
    .el-menu-item-group__title{
        display: none;
    }
    .el-menu-item,.el-submenu__title,.el-menu-item-group li{
        height: 40px;
        line-height: 40px;
    }
    .el-menu-item.is-active {
        background-color: $background-default-active;
        color: $primary-color;
    }
    .el-submenu__title:hover,.el-menu-item:focus, .el-menu-item:hover {
        background-color: $background-default-active;
    }
}

.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link {
    color: $primary-color;
    font-weight: 500;
}

.el-tag {
    &--mini {
        line-height: 20px;
    }
}